

<template>
  <view class="box" v-for="(item, index) in list" :key="index">
    <uv-image
        width="80"
        height="80"
        :src="item.goods_img"
    ></uv-image>
    <view class="info">
      <view class="name">
        {{ item.goods_name }}
      </view>
      <view class="bottom">
        <view class="price">
          ￥{{ item.goods_price }}
        </view>
        <view class="num">
          X {{ item.number }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import {getOrder} from "@/request/api";

const list = ref([]);
const id = ref();
const pageNum = ref(1)
onMounted(() => {
  const pages = getCurrentPages(); // 获取当前页面栈
  const currentPage = pages[pages.length - 1]; // 获取当前页面
  id.value = currentPage.options.id;
  // console.log(id.value, '---=')
  getOrder({pageNum: pageNum.value, pageSize: 10}).then(res => {
    if (res.code === 0) {
      const current = res.result.list.find(item => item.order_code === id.value)
      const goodsInfo = JSON.parse(current.goods_info);
      console.log(goodsInfo, '-----')
      list.value = goodsInfo
      if (res.result.total > 10) {
        return getOrder({pageNum: pageNum.value, pageSize: res.result.total});
      }
    }
  })
  console.log(list.value, '列表')
})

</script>
<style scoped lang="scss">
.box{
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #FFFFFF;
  border-radius: 15px;
  margin-top: 10px;
  .info{
    margin-left: 15px;
    width: calc(100% - 95px);
    .name {
      display: -webkit-box; /* 这是创建一个伸缩容器 */
      -webkit-box-orient: vertical; /* 定义伸缩容器的主轴方向 */
      -webkit-line-clamp: 2; /* 限制显示的行数为2行 */
      overflow: hidden; /* 隐藏超出内容 */
      text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
    }
    .bottom{
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      .price{
        color: red;
      }
    }
  }
}
</style>